<template>
  <div v-if="filminfo">
    <img :src="filminfo.poster" class="poster"/>
    <h2>{{ filminfo.name }}</h2>

    <h3>演职人员</h3>
    <DetailSwiper perview="4" swipername="detail_actors">
      <div class="swiper-slide" v-for="(item, index) in filminfo.actors" :key="index">
        <img :src="item.avatarAddress"/>
      </div>
    </DetailSwiper>

    <h3>剧照</h3>
    <DetailSwiper perview="3" swipername="detail_photos">
      <div class="swiper-slide" v-for="(item, index) in filminfo.photos" :key="index">
        <img :src="item"/>
      </div>
    </DetailSwiper>
  </div>
</template>

<script>
import axios from 'axios'
import DetailSwiper from '@/views/Detail/DetailSwiper'
// import bus from '@/bus'
import { SHOW_TABBAR_MUTATION, HIDE_TABBAR_MUTATION } from '@/type'
import { MessageBox } from 'mint-ui'

export default {
  name: 'Detail',
  components: { DetailSwiper },
  data () {
    return {
      filminfo: null
    }
  },
  created () {
    console.log('detail-created()')
  },
  beforeCreate () {
    console.log('detail-beforeCreate()')
  },
  beforeMount () {
    console.log('detail-beforeMount()')
  },
  mounted () {
    // 获取动态路由传过来的参数
    // this.$route 表示当前显示的路由
    // this.$router 表示整个路由对象
    // console.log('filmId=' + this.$route.params.id)
    // 隐藏底部选项卡
    console.log('detail-mounted()')
    // mounted生命周期 表示当前组件中所有的节点都渲染完了，才会回调此函数

    if (this.$route.params.id === '5682') {
      MessageBox({
        title: '提示',
        message: '该影片未排期?',
        showCancelButton: true
      }).then(res => {
        console.log(res)
        // 回到上一个页面
        if (res === 'confirm') {
          this.$router.back()
        }
      })
    } else {
      axios({
        url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=9852469`,
        headers: {
          'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16318468911969714951618561"}',
          'X-Host': 'mall.film-ticket.film.info'
        }
      }).then(res => {
        console.log(res.data)
        this.filminfo = res.data.data.film
      })
      // bus.$emit('kerwin', false)
      // this.$store.state.isTabBarShow = false
      this.$store.commit(HIDE_TABBAR_MUTATION, false)
    }
  },
  beforeUpdate () {
    console.log('detail-beforeUpdate()')
  },
  updated () {
    console.log('detail-updated()')
  },
  beforeDestroy () {
    console.log('detail-beforeDestroy()')
    // 显示底部选项卡
    // bus.$emit('kerwin', true)
    // this.$store.state.isTabBarShow = true
    this.$store.commit(SHOW_TABBAR_MUTATION, true)
  },
  destroyed () {
    console.log('detail-destroyed()')
  }
}
</script>

<style scoped lang="scss">
.poster {
  width: 100%;
  height: 200px;
}
</style>
